<template>
  <div class="side-menu-wrapper">
    <slot></slot>
    <Menu
      ref="menu"
      v-show="!collapsed"
      :active-name="activeName"
      :open-names="openedNames"
      :accordion="true"
      theme="dark"
      width="auto"
      @on-select="handleSelect">
      <template v-for="item in menuList">
        <Submenu :name="item.header">
          <template slot="title">
            <Icon :type="item.icon" size="16" />
            {{ item.header }}
          </template>
          <template v-for="subitem in item.childrens">
            <menu-item :name="subitem.path">{{ subitem.name }}</menu-item>
          </template>
        </Submenu>
      </template>
    </Menu>

    <div class="menu-collapsed" v-show="collapsed" :list="menuList">
      <template v-for="item in menuList">
        <collapsed-menu
          v-if="item.childrens && item.childrens.length > 0"
          @on-click="handleSelect"
          hide-title
          :root-icon-size="20"
          :icon-size="16"
          theme="dark"
          :parent-item="item"
          :key="item.header">
        </collapsed-menu>
        <Tooltip
          transfer
          v-else
          :content="item.header" placement="right" :key="item.header">
          <a
            @click="handleSelect"
            class="drop-menu-a"
            :style="{textAlign: 'center'}">
            <Icon :size="20" :color="textColor" :type="item.icon" />
          </a>
        </Tooltip>
      </template>
    </div>
  </div>
</template>
<script>
import CollapsedMenu from './collapsed-menu.vue'
import mixin from './mixin'

export default {
  name: 'sideMenu',
  mixins: [ mixin ],
  props: {
    menuList: {
      type: Array,
      default: []
    },
    activeName: {
      type: String
    },
    collapsed: {
      type: Boolean
    },
    openNames: {
      type: Array,
      default: () => []
    }
  },
  components: {
    CollapsedMenu
  },
  data () {
    return {
      theme: 'dark',
      openedNames: []
    }
  },
  methods: {
    handleSelect (name) {
      this.$router.push({
        name
      });
    },
    getOpenedNamesByActiveName (name) {
      let openName = [];
      this.menuList.forEach(item => {
        if (item.childrens.length > 0) {
          item.childrens.forEach(subitem => {
            if (subitem.path === name) return openName.push(item.header);
          });
        }
      });
      return openName;
    },
    updateOpenName (name) {
      if (name === 'home') {
        this.openedNames = [];
      } else {
        this.openedNames = this.getOpenedNamesByActiveName(name);
      }
    }
  },
  computed: {
    textColor () {
      return this.theme === 'dark' ? '#fff' : '#495060'
    }
  },
  watch: {
    activeName (name) {
      this.openedNames = this.getOpenedNamesByActiveName(name);
    },
    openNames (newName) {
      this.openedNames = newName;
    },
    openedNames () {
      this.$nextTick(() => {
        this.$refs.menu.updateOpened();
        this.$refs.menu.updateActiveName();
      })
    }
  },
  mounted () {

  }
}
</script>
<style lang="scss">
@import './side-menu.scss';
</style>
